<!--
 * @Description: 活动详情
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-09 14:44:04
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-17 23:33:57
 * @FilePath: /lieshou-app/pages/activity_details.vue
-->

<template>
	<view class="content">
		<z-paging ref="paging" :refresher-enabled='false'>
			<view slot="top">
				<!-- navbar -->
				<zNav :title="title" :showBg="true" :showBack="true"></zNav>
			</view>
			<!-- 详情卡片 -->
			<!-- <zActivityList title='活动名称' date='2024年3月1日-16日' type='details'></zActivityList> -->
			<!--  label-->
			<!-- <zLabel title='活动名称'></zLabel>
		<zLabel title='参与收获'></zLabel>
		<zLabel title='参与方式'></zLabel> -->
			<!-- btn -->
			<!-- 详情图 -->
			<view class="bg-box">
				<image class="detail-img" :src="activiteIns.detail" mode="widthFix"></image>
			</view>
			<view slot='bottom'>
				<!-- <view class="btn-none" >您已经参与过活动{{activiteIns.join}}～</view> -->
				<view v-if="activiteIns.isJoin==='noJoin'" class="btn-activity" @click="getCreateActivity">参与活动</view>
				<view v-if="activiteIns.isJoin==='isJoin'" class="btn-none">您已经参与过活动～</view>
			</view>

		</z-paging>
	</view>
</template>

<script>
	import zActivityList from '@/components/z-activity-list.vue';
	import zLabel from '@/components/z-label.vue';
	import zNav from '@/components/z-nav.vue';
	export default {
		components: {
			zActivityList,
			zLabel,
			zNav
		},
		data() {
			return {
				// 标题
				title: '活动详情',
				// 详情数据汇总
				activiteIns: {}
			};
		},
		methods: {
			// 参加活动
			getCreateActivity() {
				uni.$uv.throttle(() => {
					this.$apis.createActivity({
						activity_id: parseInt(this.activiteIns.id),
						join: true
					}).then((element) => {
						// 输出日志
						this.$utils.showLog('参与活动请求', element)
						uni.$uv.toast('您已经参与成功～')
						this.activiteIns.isJoin='isJoin'
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url: "/pages/service_center"
						// 	})
						// }, 200)
					}).catch((e) => {
						// this.$utils.showToast('登录过期请稍后尝试！', 1000)
					})
				}, 1000)

			}
		},
		onLoad(query) {
			if (query) {
				this.activiteIns = query
				this.$utils.showLog('活动详情', this.activiteIns)
				this.title = query.name
				console.log('===',this.activiteIns)
			}
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~', '/pages/service_center',
				'https://img.js.design/assets/img/66a939f9cb8cbd1e8622a19c.jpg')
			// #endif
		},
	}
</script>

<style lang="scss">
	page {

		background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.content {
		width: 100%;
		height: 100%;

		.bg-box {
			width: 100%;
			height: 100%;

			.detail-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.btn-activity {
			// position: absolute;
			// bottom: 0;
			width: 100%;
			height: 78rpx;
			text-align: center;
			line-height: 78rpx;
			text-align: center;
			background: linear-gradient(to right, rgba(205, 235, 254, 1), rgba(254, 204, 229, 1), rgba(219, 188, 253, 1));
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}

		.btn-none {
			width: 100%;
			height: 78rpx;
			opacity: 0.7;
			text-align: center;
			line-height: 78rpx;
			text-align: center;
			background: linear-gradient(to right, rgba(205, 235, 254, 0.7), rgba(254, 204, 229, 0.6), rgba(219, 188, 253, 0.4));

			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 1);
		}
	}
</style>